import React from "react";

import { uniqueId } from "lodash";
import { ICON_SIZES, IconSizes } from "styles/var/icon_sizes";

interface IPremiumFeatureProps {
  size?: IconSizes;
}

const PremiumFeature = ({ size = "medium" }: IPremiumFeatureProps) => {
  const clipPathId = uniqueId("clip-path-");
  const maskIdA = uniqueId("mask-");
  const maskIdB = uniqueId("mask-");

  return (
    <svg
      width={ICON_SIZES[size]}
      height={ICON_SIZES[size]}
      viewBox="0 0 17 17"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect width="17" height="17" fill="none" />
      <rect
        width="1400"
        height="880"
        transform="translate(-664 -401)"
        fill="none"
      />
      <rect
        width="1400"
        height="830"
        transform="translate(-664 -351)"
        fill="none"
      />
      <g clipPath={`url(#${clipPathId})`}>
        <mask id={maskIdA} fill="white">
          <path d="M8.5 16.5C12.9183 16.5 16.5 12.9183 16.5 8.5C16.5 4.08172 12.9183 0.5 8.5 0.5C4.08172 0.5 0.5 4.08172 0.5 8.5C0.5 12.9183 4.08172 16.5 8.5 16.5Z" />
        </mask>
        <path
          d="M8.5 16.5C12.9183 16.5 16.5 12.9183 16.5 8.5C16.5 4.08172 12.9183 0.5 8.5 0.5C4.08172 0.5 0.5 4.08172 0.5 8.5C0.5 12.9183 4.08172 16.5 8.5 16.5Z"
          fill="#C98DEF"
          stroke="#B17FF0"
          strokeWidth="2"
          mask={`url(#${maskIdA})`}
        />
        <mask
          id={maskIdB}
          maskUnits="userSpaceOnUse"
          x="2.2002"
          y="3"
          width="12"
          height="11"
          fill="black"
        >
          <rect fill="white" x="2.2002" y="3" width="12" height="11" />
          <path d="M12.5334 6.99092L9.97518 6.69946C9.91026 6.69256 9.85501 6.6525 9.826 6.59448L8.62148 4.10671C8.55241 3.96443 8.34936 3.96443 8.28029 4.10671L7.07577 6.59448C7.04815 6.6525 6.99151 6.69256 6.92659 6.69946L4.36837 6.99092C4.20261 7.01026 4.14045 7.21746 4.26891 7.3252L6.28151 8.99938C6.33538 9.04496 6.36024 9.11679 6.34505 9.18586L5.74832 11.9319C5.7124 12.0936 5.88921 12.2193 6.03149 12.135L8.3535 10.7412C8.4129 10.7053 8.48887 10.7053 8.54827 10.7412L10.8703 12.135C11.0126 12.2206 11.188 12.0949 11.1521 11.9319L10.5553 9.18586C10.5401 9.11679 10.565 9.04496 10.6189 8.99938L12.6315 7.3252C12.7599 7.21884 12.6978 7.01026 12.532 6.99092H12.5334Z" />
        </mask>
        <path
          d="M12.5334 6.99092L9.97518 6.69946C9.91026 6.69256 9.85501 6.6525 9.826 6.59448L8.62148 4.10671C8.55241 3.96443 8.34936 3.96443 8.28029 4.10671L7.07577 6.59448C7.04815 6.6525 6.99151 6.69256 6.92659 6.69946L4.36837 6.99092C4.20261 7.01026 4.14045 7.21746 4.26891 7.3252L6.28151 8.99938C6.33538 9.04496 6.36024 9.11679 6.34505 9.18586L5.74832 11.9319C5.7124 12.0936 5.88921 12.2193 6.03149 12.135L8.3535 10.7412C8.4129 10.7053 8.48887 10.7053 8.54827 10.7412L10.8703 12.135C11.0126 12.2206 11.188 12.0949 11.1521 11.9319L10.5553 9.18586C10.5401 9.11679 10.565 9.04496 10.6189 8.99938L12.6315 7.3252C12.7599 7.21884 12.6978 7.01026 12.532 6.99092H12.5334Z"
          fill="white"
        />
        <path
          d="M12.5334 6.99092L9.97518 6.69946C9.91026 6.69256 9.85501 6.6525 9.826 6.59448L8.62148 4.10671C8.55241 3.96443 8.34936 3.96443 8.28029 4.10671L7.07577 6.59448C7.04815 6.6525 6.99151 6.69256 6.92659 6.69946L4.36837 6.99092C4.20261 7.01026 4.14045 7.21746 4.26891 7.3252L6.28151 8.99938C6.33538 9.04496 6.36024 9.11679 6.34505 9.18586L5.74832 11.9319C5.7124 12.0936 5.88921 12.2193 6.03149 12.135L8.3535 10.7412C8.4129 10.7053 8.48887 10.7053 8.54827 10.7412L10.8703 12.135C11.0126 12.2206 11.188 12.0949 11.1521 11.9319L10.5553 9.18586C10.5401 9.11679 10.565 9.04496 10.6189 8.99938L12.6315 7.3252C12.7599 7.21884 12.6978 7.01026 12.532 6.99092H12.5334Z"
          stroke="#B17FF0"
          strokeWidth="2"
          mask={`url(#${maskIdB})`}
        />
      </g>
      <defs>
        <clipPath id={clipPathId}>
          <rect
            width="16"
            height="16"
            fill="white"
            transform="translate(0.5 0.5)"
          />
        </clipPath>
      </defs>
    </svg>
  );
};

export default PremiumFeature;
